<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
    <title>bootStrap</title>
</head>

<body>
    <p>img-thumbnail 圆角+边框</p>
    <img class="img-thumbnail" src="../img/img1.png">
    <p>img-fluid 无边框</p>
    <img class="img-fluid" src="../img/img1.png">
    <p>picture 标签 里面可以嵌套source标签达到不同大小浏览器显示不同图片</p>
    <picture>
        <source media="(min-width: 1000px)" srcset="../img/img1.png">
        <source media="(min-width: 800px)" srcset="../img/img2.png">
        <source media="(min-width: 500px)" srcset="../img/img3.png">
        <img src="../img/img3.png" alt="浏览器不支持picture时"  >
    </picture>
    <script src="../lib/jquery-3.3.1/jquery-3.3.1.js"></script>
    <script src="../lib/bootstrap-4.4.1-dist/js/popper.min.js"></script>
    <script src="../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</body>

</html>